<template>
    <div style="padding: 24px;">
      <h2 style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">动态维护定时任务</h2>
      <!-- 查询区 -->
      <div style="margin-bottom: 16px; display: flex; align-items: center;">
        <span style="margin-right: 8px;">任务名称:</span>
        <el-input v-model="query.name" placeholder="请输入任务名称" style="width: 200px; margin-right: 16px;" clearable />
        <span style="margin-right: 8px;">任务分组:</span>
        <el-input v-model="query.group" placeholder="请输入任务分组" style="width: 200px; margin-right: 16px;" clearable />
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <span style="margin-left: 32px; color: #888;">参考Cron表达式网站: 
          <a href="https://cron.qqe2.com/" target="_blank">https://cron.qqe2.com/</a> / 
          <a href="https://www.pppet.net/" target="_blank">https://www.pppet.net/</a>
        </span>
      </div>
      <!-- 表格区 -->
      <el-table :data="filteredTasks" border style="width: 100%;">
        <el-table-column prop="id" label="Id" width="50" />
        <el-table-column prop="name" label="任务名称" width="100" />
        <el-table-column prop="group" label="任务分组" width="100" />
        <el-table-column prop="cron" label="Cron表达式" width="160" />
        <el-table-column prop="assembly" label="程序集" width="160" />
        <el-table-column prop="jobClass" label="任务类" width="140" />
        <el-table-column prop="execCount" label="执行次数" width="80" />
        <el-table-column prop="startTime" label="开始时间" width="160" />
        <el-table-column prop="endTime" label="结束时间" width="160" />
        <el-table-column prop="triggerType" label="触发器类型" width="100" />
        <el-table-column prop="interval" label="间隔时间s" width="100" />
        <el-table-column prop="loopCount" label="循环次数" width="80" />
        <el-table-column prop="status" label="当前状态" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启动' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="param" label="执行传参" width="80" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
              :type="scope.row.status === '启动' ? 'danger' : 'warning'"
              size="small"
              @click="toggleStatus(scope.row)"
            >
              {{ scope.row.status === '启动' ? '停用' : '启动' }}
            </el-button>
            <el-button type="primary" size="small" @click="editTask(scope.row)">模拟修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  // 查询条件
  const query = ref({
    name: '',
    group: ''
  })
  
  // 任务数据（可替换为接口获取）
  const tasks = ref([
    {
      id: 1,
      name: 'task1',
      group: '分组1',
      cron: '0,10,20,30,40,50 * * * * ?',
      assembly: 'QuartzNet6.Tasks',
      jobClass: 'Job_StudentList',
      execCount: 623,
      startTime: '2023-09-06 17:39:00',
      endTime: '2029-09-06 17:39:00',
      triggerType: 1,
      interval: 2,
      loopCount: 200,
      status: '停用',
      param: 1
    },
    {
      id: 2,
      name: 'task2',
      group: '分组2',
      cron: '0,10,20,30,40,50 * * * * ?',
      assembly: 'QuartzNet6.Tasks',
      jobClass: 'Job_StudentList',
      execCount: 736,
      startTime: '2023-09-06 17:39:00',
      endTime: '2029-09-06 17:39:00',
      triggerType: 1,
      interval: 200,
      loopCount: 200,
      status: '停用',
      param: 2
    },
    {
      id: 3,
      name: 'task3',
      group: '分组3',
      cron: '0,10,20,30,40,50 * * * * ?',
      assembly: 'QuartzNet6.Tasks',
      jobClass: 'Job_DelStudent',
      execCount: 332,
      startTime: '2023-09-06 17:39:00',
      endTime: '2029-09-06 17:39:00',
      triggerType: 1,
      interval: 200,
      loopCount: 200,
      status: '启动',
      param: 3
    }
  ])
  
  // 查询过滤
  const filteredTasks = computed(() => {
    return tasks.value.filter(task => {
      const nameMatch = !query.value.name || task.name.includes(query.value.name)
      const groupMatch = !query.value.group || task.group.includes(query.value.group)
      return nameMatch && groupMatch
    })
  })
  
  // 查询按钮
  function handleQuery() {
    // 实际项目中可调用接口
    ElMessage.success('查询成功')
  }
  
  // 启动/停用
  function toggleStatus(row: any) {
    row.status = row.status === '启动' ? '停用' : '启动'
    ElMessage.success(`任务${row.status === '启动' ? '已启动' : '已停用'}`)
  }
  
  // 模拟修改
  function editTask(row: any) {
    ElMessageBox.alert(`模拟修改任务：${row.name}`, '提示', { confirmButtonText: '确定' })
  }
  </script>